<template>
	<view class="applyRefund">
		<view class="header">
			<navigator open-type="navigateBack" delta="1">
				<image src="../../static/image/fanhui (2).png" mode="widthFix" style="width: 80rpx;"></image>
			</navigator>
			<text>申请退款</text>
		</view>
		<view class="payfor">
			<view class="titleName">退款商品</view>
			<view class="box">
				<view class="image">
					<image src="https://i.loli.net/2021/04/10/oquX7NpH4BxcOwe.png" mode="widthFix" style="width: 180rpx;"></image>
				</view>
				<view class="center">
					<view class="time">标准洗车-5座洗车</view>
					<view class="price">￥25.00</view>
				</view>
			</view>
		</view>
		<view class="applyDetail">
			<view class="title">退款商品</view>
			<view class="applyOption">
				<view class="option">
					<image src="../../static/image/tui1@3x.png" mode="widthFix" style="width: 30rpx;"></image>
					<navigator url="/pages/home/reasonsForReturn">
						<text>我要退款(无需退货)</text>
					</navigator>
				</view>
				<view class="option">
					<image src="../../static/image/tui2@3x.png" mode="widthFix" style="width: 30rpx;"></image>
					<text>我要退货退款</text>
				</view>
				<view class="option">
					<image src="../../static/image/tui3@3x.png" mode="widthFix" style="width: 30rpx;"></image>
					<text>我要换货</text>
				</view>
			</view>
		</view>




	</view>
</template>

<script>
	export default {
		components: {},
		mounted() {},
		data() {
			return {

			}
		},
		methods: {}
	}
</script>

<style lang="scss" scoped>
	.applyRefund {
		position: relative;
		background-color: #f9f9f9;
		height: 800px;

		.header {
			height: 340rpx;
			background: linear-gradient(120deg, #fd8839, #fd873c, #fd8846, #fd8c38, #fda548, #fda548, #fd793a, #fd883a);
			color: white;
			display: flex;
			align-items: center;
			box-sizing: border-box;
			padding: 40rpx 0;

			text {
				margin-left: 240rpx;
			}
		}

		.payfor {
			width: 660rpx;
			height: 200rpx;
			position: absolute;
			padding: 0 24rpx;
			top: 220rpx;
			left: 0;
			background-color: #FFFFFF;
			margin: 24rpx;
			border-radius: 20rpx;
			box-shadow: -1px 1px 3px 1px rgba(gray, 0.4);

			.box {
				display: flex;

				.center {
					display: flex;
					justify-content: center;
					flex-direction: column;
					align-items: center;
				}
			}

			.titleName {
				font-size: 28rpx;
				padding: 10rpx 0;
			}

			.time {
				font-size: 22rpx;
			}

			.price {
				color: #ff5300;
				font-weight: bold;
			}
		}

		.applyDetail {
			margin: 24rpx;
			padding: 24rpx;
			background-color: #FFFFFF;
			border-radius: 20rpx;
			margin-top: 120rpx;

			.title {
				font-size: 28rpx;
				font-weight: bold;
				margin: 10rpx 0;
			}

			.option {
				font-size: 24rpx;
				border-bottom: 1px solid #fafafa;
				margin: 20rpx 0;
				font-weight: bold;
				display: flex;
				text {
					margin: 0 10rpx;
				}
			}

		}







	}
</style>
